<template>
	<view>
		<u-navbar title="分店管理" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="jumpurl('/pages/workbench/shenhezt')">
				<view class="toprightbtn">
					稽核狀態
				</view>
			</view>
		</u-navbar>
		<!-- <u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" :scrollable="false" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky> -->
		<view class="" style="padding-bottom: 150rpx;">
			<view class="flexcenter" v-if="!shop.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff flexbetween" v-for="(item,index) in shop" @click="jumpdetail('/pages/workbench/fendianxq?id=',item.id)">
				<view class="flexleft">
					<image :src="item.logoimage_text" class="listleftimg2 margin_right" style="border-radius: 10rpx;" mode="">
					</image>
					<view class="">
						<view class="hei_text main_size bold xiankuan">{{item.name}}</view>
						<view class="xiaohui margin_top">綁定時間：{{item.bangdingtime}}</view>
					</view>
				</view>
				<!-- <view class="jiechubd" @click="sure(item.id)">解除綁定</view> -->
			</view>
		</view>
		<view class="mainpadding posibottom flexbetween" style="bottom: 0;">
			<view class="submitbtn" style="width: 48%;" @click="bdshow=true">綁定分店</view>
			<view class="submitbtn" style="width: 48%;" @click="jumpurl('/pages/workbench/fendianrz')">分店入駐</view>
		</view>
		<u-modal :show="bdshow" title="綁定分店" showCancelButton confirmColor="#ff8505" @confirm="bdconfirm()" confirmText="確認" cancelText="取消"
			@cancel="bdshow=false">
			<view class="slot-content mainpadding" style="width: 100%;">
				<u--input placeholder="請輸入行動電話" type="number" class="xiaohei" border="surround" clearable
					v-model="fd_mobile"> </u--input>
				<u--input placeholder="請輸入驗證碼" type="number" class="xiaohei margin_top" border="surround" clearable
					v-model="fd_code">
					<template slot="suffix">
						<view class="xiaohuang" v-if="codeTime == 60" @click="getCode">獲取驗證碼</view>
						<view class="xiaohuang" v-else>{{ codeTime }}s後重新發送</view>
					</template>
				</u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: "全部",
						id: 1
					},
					{
						name: "待稽核",
						id: 2
					},
					{
						name: "已通過",
						id: 3
					},
					{
						name: "已拒絕",
						id: 4
					},
				],
				tabsId: 1,
				bdshow: false,
				shop: '',
				fd_mobile: '',
				fd_code: '',
				isClick: true,
				captcha: "", //验证碼
				codeTime: 60, //倒計时時間
				codesure:"",
			}
		},
		onLoad() {
			this.get()
		},
		methods: {
			getCode() {
				if (this.isClick) {
					if(!this.fd_mobile){
						this.http.toast("請輸入行動電話")
						return false
					}
					this.isClick = false;
					let data = {
						mobile: this.fd_mobile,
						event:"fendbindcer"
					};
					this.http.request("/api/sms/fs", 'POST', data).then((res) => {
						if (res.code == 1) {
							this.downTime();
							uni.showToast({
								title: "發送成功",
								icon: "none",
							});
							this.codesure = res.data
						} else {
							this.isClick = true;
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				}
			},
			// 发送验证碼倒計时
			downTime() {
				if (this.codeTime == 0) {
					this.codeTime = 60;
					this.isClick = true;
					return;
				} else {
					this.codeTime--;
					this.isClick = false;
					setTimeout(() => {
						this.downTime();
					}, 1000);
				}
			},
			bdconfirm() {
				if(!this.fd_mobile){
					this.http.toast("請輸入行動電話")
					return false
				}
				if(!this.fd_code){
					this.http.toast("請輸入驗證碼")
					return false
				}
				httpRequest.request('/api/shop/fendianbd', 'POST', {
					fd_mobile: this.fd_mobile,
					fd_code: this.fd_code,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.get()
						this.bdshow = false
					}
				})
			},
			async get() {
				let res = await this.http.request("/api/shop/fendianlist", "POST", {})
				if (res.code == 1) {
					this.shop = res.data
				}
			},
			jujueconfirm() {
				this.bdshow = false
			},
			sure(id) {
				httpRequest.modal('提示', '確定解除綁定嗎？', true, (res) => {
					console.log(res)
					if (res) {
						httpRequest.request('/api/shop/fendiandel', 'POST', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							this.shop = ""
							this.get()
						})
					}
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.jiechubd {
		padding: 15rpx 20rpx;
		background-color: #fff3e6 !important;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #FF8505 !important;
		border: 1rpx solid #FF8505 !important;
	}
</style>